<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            document.getElementById('bt1').onclick = function(){
                //创建一个li节点
                var addli1 = document.createElement('li');
                //创建一个城市文本节点
                var citytext = document.createTextNode('浙江');
                //将文本节点设置为li节点的字节点
                addli1.appendChild(citytext);
                //获取ul
                var ul = document.getElementById('uls');
                //将li设置为ul的子节点
                ul.appendChild(addli1);
            }

            document.getElementById('bt2').onclick = function(){
                //创建一个li节点
                var addli2 = document.createElement('li');
                //创建一个文本节点
                var citytext = document.createTextNode('四川');
                //将文本节点设置为li的子节点
                addli2.appendChild(citytext);
                //获取贵阳的li节点
                var guiyang = document.getElementById('guiyang');
                //获取ul节点
                var ul = document.getElementById('uls');
                //在贵阳之前插入li
                ul.insertBefore(addli2,guiyang);
            }

            document.getElementById('bt3').onclick = function(){
                //创建一个li节点
                var addli2 = document.createElement('li');
                //创建一个文本节点
                var citytext = document.createTextNode('江西');
                //将文本节点设置为li的子节点
                addli2.appendChild(citytext);
                //获取贵阳的li节点
                var guiyang = document.getElementById('guiyang');
                //获取ul节点
                var ul = document.getElementById('uls');
                //替换贵阳子节点
                ul.replaceChild(addli2,guiyang);
            }

            document.getElementById('bt4').onclick = function(){
                //找到天津这个节点
                var tj = document.getElementById('tj');
                //获取它的父节点
                // var parent =document.getElementById('uls');
                // //删除
                // parent.removeChild(tj);

                //另外一种方法
                tj.parentNode.removeChild(tj);
            }

            document.getElementById('bt5').onclick = function(){
                //创建一个li节点
                var li = document.createElement('li');
                //使用innerHTML写入文本
                li.innerHTML="江苏";
                //获取父节点
                var ul = document.getElementById('uls')
                //将设置为ul的子节点
                ul.appendChild(li);
            }
        }
    </script>

    <style>
        
        .box{
            display: inline-block;
            background-color: lightblue;
        }
        li{
            display: inline-block;
            background-color: lightgoldenrodyellow;
            margin: 10px;
        }
        .box2{
            display: inline-block;
          } 
        button{
            display: block;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>常驻城市：</p>
        <ul id="uls">
            <li id="tj">天津</li>
            <li id="guiyang">贵阳</li>
            <li>重庆</li>
            <li>北京</li>
        </ul>
    </div>
    <div class="box2">
        <button id="bt1">添加一座城市</button>
        <button id="bt2">在贵阳这个城市之前加入一座城市</button>
        <button id="bt3">加一个新的城市替换贵阳</button>
        <button id="bt4">删除天津</button>
        <button id="bt5">使用innerHTML修改</button>
    </div>
</body>
</html>